<template>
  <view>
    <view
      v-if="recommendList.length>0"
      class="custom-title"
    >
      <text class="title-icon font_family icon-damuzhi_tongyong_1" />
      推荐品牌
    </view>
    <view
      v-if="recommendList.length>0"
      class="brand-recommend clearfix"
    >
      <view
        v-for="(item, index) in recommendList"
        :key="index"
        class="recommend-li"
        @click="linkProductListFn(item.brandId, item.brandName)"
      >
        <view class="pic">
          <image
            class="brand-image"
            :src="item.brandPictureUrl"
          />
        </view>
        <view class="name">{{ item.brandName }}</view>
      </view>
    </view>
    <view class="custom-title all-brand">全部品牌</view>
    <view class="brand-all">
      <uni-list class="list-group" :border="false">
        <uni-list-item
          v-for="(item, index) in brandList"
          :key="index"
          clickable
          :border="false"
          @click="linkProductListFn(item.brandId, item.brandName)"
        >
          <view
            slot="header"
            class="row-header"
          >
            <view class="pic">
              <image class="brand-image" :src="item.brandLogo" />
            </view>
            <text class="name uni-ellipsis-1">{{ item.brandName }}</text>
          </view>
          <view
            slot="footer"
          >
            <text class="right-icon font_family icon-a-arrowright_tongyong_2" />
          </view>
        </uni-list-item>
      </uni-list>
    </view>
  </view>
</template>

<script>
import { setPlatformFn } from '@/common/ycCommon'
import {
  selectFrontCategoryBrandLogoList,
  searchBrandPageQuery
} from '@/api/yc_goods';
export default {
  data() {
    return {
      title: 'Index',
      pageParams: {
        // state: 'ERROR',
        emptyTitle: '信号可能跑到外星球了哦～',
        errorTitle: '请求失败',
        showButton: true
      },
      pageSize: 20,
      recommendList: [], //推荐品牌
      brandList: [], //品牌列表
    }
  },
  mounted() {
    this.pageInitFn()
  },
  methods: {
    pageInitFn(pageNum) {
      this.selectFrontCategoryBrandLogoListFn()
      this.searchBrandPageQueryFn(pageNum)
    },
    linkProductListFn(brandId, brandName) {
      uni.navigateTo({
        url: `/productList/productList/index?title=${brandName}&brandId=${brandId}&pageType=brand`
      });
    },
    selectFrontCategoryBrandLogoListFn() {
      const platform = setPlatformFn(this.vuex_memberInfo) || 20
      /*if (this.vuex_memberInfo && this.vuex_memberInfo.length > 0) {
        switch (Number(this.vuex_memberInfo.accountType)) {
          case 10:
            platform = 10
            break
          case 20:
            platform = 20
            break
          case 30:
            platform = 20
            break
          case 39:
            platform = 30
            break
          case 40:
            platform = 30
            break
          default:
            platform = 20
            break
        }
      }*/
      const params = {
        'platform': platform,
        'warehouseCode': this.vuex_cityInfo.warehouseCode,
        'frontCategoryId': 0,
        'categoryId': '22',
        'status': 20
      }
      selectFrontCategoryBrandLogoList(params).then((res) => {
        this.$emit('setPageParamsFn', null)
        if (res.errorCode == 0) {
          this.recommendList = res.data
        } else {
          this.$u.toast(res.msg)
        }
      }).catch((err) => {
        this.$emit('setPageParamsFn', 'ERROR', err.message ? err.message : '服务异常')
        this.$emit('resetLoadMoreFn', {
          isLoadMore: true,
          loadStatus: 'nomore'
        })
      })
    },
    searchBrandPageQueryFn(pageNum = 1) {
      const params = {
        pageNum: pageNum,
        pageSize: this.pageSize,
      }
      searchBrandPageQuery(params).then((res) => {
        this.$emit('setPageParamsFn', null)
        if (res.code != 0) {
          this.$u.toast(res.msg)
          return
        }
        this.$nextTick(() => {
          if (res.data.brandList) {
            this.brandList = this.brandList.concat(res.data.brandList)
            if (res.data.brandList.length < this.pageSize) {
              this.$emit('resetLoadMoreFn', {
                isLoadMore: true,
                loadStatus: 'nomore'
              })
            } else {
              this.$emit('resetLoadMoreFn', {
                isLoadMore: false,
                loadStatus: 'more'
              })
            }
          } else {
            this.$emit('resetLoadMoreFn', {
              isLoadMore: true,
              loadStatus: 'nomore'
            })
          }
          this.$forceUpdate()
        })
      }).catch((err) => {
        this.$emit('setPageParamsFn', 'ERROR', err.message ? err.message : '服务异常')
        this.$emit('resetLoadMoreFn', {
          isLoadMore: true,
          loadStatus: 'nomore'
        })
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.custom-title{
  padding: 0 0 0 32rpx;
  .title-icon{
    font-size: $uni-font-size-lg;
    color: $uni-text-color-orange;
    margin: 0 0 0 8rpx;
    position: relative;
    top:2rpx;
  }
}
.all-brand{
  margin-top: 16rpx;
}
.brand-recommend{
  padding:0 17rpx;
  margin-top: -8rpx;
  .recommend-li{
    float: left;
    width:calc(50% - 30rpx);
    margin: 24rpx 15rpx 0;
    height: 134rpx;
    text-align: center;
    border-radius:$uni-border-radius-default;
    background: $uni-bg-color;
    .pic{
      height: 82rpx;
      line-height: 82rpx;
      overflow: hidden;
      border-bottom:2rpx solid $uni-border-gray;
      .brand-image{
        width: 180rpx;
        height: 60rpx;
        margin-top: 11rpx;
      }
    }
    .name{
      color:$uni-text-color-grey;
      line-height: 50rpx;
    }
  }
}

.brand-all{
  clear: both;
  background: $uni-bg-color;
  border-radius: 8rpx;
  margin:16rpx 32rpx 0;
  overflow: hidden;
  .row-header{
    font-size: $uni-font-size-sm;
    .pic{
      width: 120rpx;
      text-align: center;
      overflow: hidden;
      float: left;
      .brand-image{
        width: 120rpx;
        height: 40rpx;
      }
    }
    .name{
      width: 380rpx;
      float: left;
      margin-left: 32rpx;
    }
  }
  .right-icon {
    /* #ifndef APP-NVUE */
    display: block;
    /* #endif */
    margin:4rpx -18rpx 0 0;
    float: left;
    font-size:$uni-font-size-lg;
    color: $uni-text-color;
  }
}

</style>
